<!-- 首页 -->
<template>
  <div class="card-main">
    <div class="card-main-head">
      <span
        v-for="item in headList"
        :class="current == item.id ? 'current' : ''"
        :key="item.id"
        @click="labelChange(item)"
        >{{ item.name }}</span
      >
    </div>
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(['tabsChange'])

const headList = ref([
  {
    id: 0,
    name: "推荐",
  },
  {
    id: 1,
    name: "最新",
  },
]);

let current = ref(0);

const labelChange = (item) => {
  current.value = item.id;
  emits('tabsChange',item.id)
};
</script>



<style lang="scss" scoped>
.card-main {
  background: #fff;
  margin-top: 15px;
  border-radius: 15px 15px 0 0;

  h3 {
    padding: 15px;
  }
}
.card-main-head {
  display: flex;
  padding: 0 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #f2f2f2;
  span {
    padding: 15px 0 8px 0;
    margin-right: 20px;
    position: relative;
  }
  span.current {
    color: $default-color;
    &::before {
      position: absolute;
      display: inline-block;
      content: "";
      width: 50%;
      height: 4px;
      border-radius: 4px;
      left: 0;
      bottom: 0;
      background-color: $default-color;
    }
  }
}
</style>